<template>
  <view class="container">
    
    <!-- 余额卡片 -->
	<view class="card">
	  <!-- 卡片标题部分 -->
	  <view class="card-header">
		<view class="balance">可用{{pointsSetting.points_name}}</view>
	  </view>
	  <!-- 数值部分 -->
	  <view class="amount">{{user.points}}</view>
	  <!-- 详情部分 -->
	  <!--
	  <view class="details">
		<view class="detail-item">
		  <text class="iconfont">&#xe6b3;</text>
		  <text>总蜜豆 {{user.balance}}</text>
		</view>
		<view class="detail-item">
		  <text class="iconfont">&#xe63a;</text>
		  <text>支付中 0</text>
		</view>
	  </view>
	  -->
	</view>


    <!-- 菜单列表 -->
    <view class="menu">
      <view class="menu-item" @click="gotoPage('/pages/agent/points/details')">
        {{pointsSetting.points_name}}明细
        <text class="iconfont">&#xe6a4;</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
data() {
    return {
		is_agent : {},
		top_background : {},
		agent : {},
		user : {},
		isData : false,
		loadding : false,
		pointsSetting:{points_name:''}
	};
  },
  onLoad() {
  	
  },
  onShow() {
  	uni.showLoading({
  		title: '加载中'
  	});
  	/*获取个人中心数据*/
  	this.getData();
  },
  methods: {
  	/*获取数据*/
  	getData() {
  		let self = this;
  		self._get('user.agent/center', {}, function(data) {
  			self.is_agent = data.data.is_agent;
  			self.top_background = data.data.background;
  			self.agent = data.data.agent;
  			self.user = data.data.user;
			self.pointsSetting = data.data.pointsSetting
			// 动态设置标题
			uni.setNavigationBarTitle({
			  title: self.pointsSetting.points_name
			});
  			self.isData = true;
  			self.loadding = false;
  			uni.hideLoading();
  		});
  	},
	/*去提现*/
	gotoCash() {
		this.gotoPage('/pages/agent/cash/apply/apply');
	},
	goback() {
		uni.navigateBack();
	}
}
};
</script>

<style scoped>
/* 页面容器 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.card {
  background: linear-gradient(135deg, #e3cce3, #f8f8f8);
  margin: 10px;
  padding: 20px;
  border-radius: 12px;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
}

.balance {
  font-size: 16px;
}

.recharge {
  font-size: 14px;
  color: #7e57c2;
  border: 1px solid #7e57c2;
  border-radius: 16px;
  padding: 4px 12px;
}

.amount {
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0;
}

.details {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.detail-item {
  display: flex;
  align-items: center;
  color: #7e57c2;
}

.iconfont {
  font-size: 18px;
  margin-right: 6px;
}

/* 菜单列表 */
.menu {
  background-color: #fff;
  margin: 10px;
  border-radius: 12px;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  color: #333;
}

.menu-item:last-child {
  border-bottom: none;
}
</style>
